<template>
	<view class="u-p-y-10 u-text-center u-font-24">
		<template v-for="(item,idx) in richArr">
			<text v-if="item.type=='user'" class="text-blue u-m-x-4" :key="idx" @tap="jumpTo(`/pages/user/info?id=${item.userId}`)">{{item.userId==userId?'你':(item.info.remarks||item.info.userName||item.content)}}</text>
			<text v-else-if="item.type=='txt'" class="text-gray" :key="idx">{{item.content}}</text>
		</template>
	</view>
</template>

<script>
	import DC from '@/DC';
	import {jumpTo} from "@/utils/util.js"
	import {mapGetters} from "vuex"
	export default{
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		computed:{
			...mapGetters('user',['userId']),
			richArr(){
				if(!this.info||!this.info.rich){
					return []
				}
				const reg = /<span user="(?<user>.*?)">(?<content>.*?)<\/span>/g;
				const arr = []
				const rich = this.info.rich
				let match =  reg.exec(rich)
				let idx = 0
				while(!!match){
					arr.push({
						type:'txt',
						content:rich.slice(idx,match.index)
					})
					arr.push({
						type:'user',
						content:match.groups.content,
						userId:match.groups.user,
						info:DC.userDB.getUser(match.groups.user)
					})
					idx = (match.index+match[0].length)
					match = reg.exec(rich)
				}
				arr.push({
					type:'txt',
					content:rich.slice(idx)
				})
				return arr
			}
		},
		methods:{
			jumpTo
		}
	}
</script>

<style lang="scss" scoped>
	.msg_txt{
		position: relative;
		padding: 14rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		max-width: 400rpx;
		border-radius: 0 10rpx 10rpx 10rpx;
		word-wrap: break-word;
		.text{
			word-wrap: break-word;
		}
		.emoji{
			width: 1.3em;
			height: 1.3em;
			display: inline-block;
			vertical-align: text-bottom;
		}
		&::before{
			position: absolute;
			content: '';
			border-width: 10rpx;
			border-style: solid;
			border-color: #FFFFFF #FFFFFF transparent transparent;
			top: 0;
			left: -8rpx;
		}
	}
	.self{
		.msg_txt{
			background-color: #cfe7ff;
			border-radius: 10rpx 0 10rpx 10rpx;
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #cfe7ff transparent transparent  #cfe7ff;
				top: 0;
				right: -8rpx;
			}
		}
	}
</style>
